<template>
  <div class="container"
    :style="{
      backgroundPositionY: (headerNavH - 2) + 'px',
      backgroundColor: pageBcConfig.backgroundColor,
      backgroundImage: pageBcConfig.backgroundPicUrl ? 'url(' + pageBcConfig.backgroundPicUrl + ')' : '' }">
    <div v-if="skeletonLoading" class="skeleton-box">
      <div class="skeleton-animate"></div>
      <div
        class="skeleton-layer layer-1 animate-blink bg-box"
        :style="{
          marginTop: headerNavH ? (headerNavH + 16) + 'px' : '80px',
        }"></div>
      <div class="skeleton-layer layer-2 flex mar-t-16">
        <span v-for="(item, index) in 5" :key="index" class="flex-item mar-r-10 animate-blink bg-box"></span>
      </div>
      <div v-for="(itemG, indexG) in 2" :key="indexG">
        <div class="skeleton-layer layer-3 animate-blink bg-box height-33 mar-t-16"></div>
        <div v-for="(item, index) in 2" :key="index" class="skeleton-layer layer-4 flex mar-t-16">
          <div class="width-116 height-116 mar-r-12 animate-blink bg-box"></div>
          <div class="flex-item">
            <span class="animate-blink bg-box height-30"></span>
            <span class="bar-s animate-blink bg-box width-70 height-30 mar-t-12"></span>
          </div>
        </div>
      </div>
    </div>
    <header-nav :dataInfo="pageBcConfig" @headerNavHeight="headerNavHeight"></header-nav>
    <get-user-info
      v-if="isGetUserInfo"
      pageType="home"
      @updateUserInfo="initMemberInfo"
      :showBackBtn="showBackBtn"
      @showPage="showPage"
      @lowVersion="lowVersionEls"></get-user-info>
    <template v-if="!getCustomerId">
      <get-phone-info
        v-if="isGetPhoneInfo"
        pageType="home"
        @updatePhoneInfo="initMemberInfo"
        :showBackBtn="showBackBtn"
        @showPage="showPage"></get-phone-info>
    </template>
    <template v-if="getCustomerId && !getPhone">
      <get-phone-info
        v-if="isGetPhoneInfo"
        pageType="home"
        @updatePhoneInfo="initMemberInfo"
        :showBackBtn="showBackBtn"
        @showPage="showPage"></get-phone-info>
    </template>
    <template v-if="getMemberId">
      <div v-if="getMemberId" class="pad-b-10">
        <div class="module-box">
          <!-- <div>
            <div class="height-100"></div>
            <div class="pad-t-30" @click="toUser('1422138499309727746')">首页 1422138499309727746 Dennis</div>
            <div class="pad-t-30" @click="toUser('1396751881346445314')">首页 1396751881346445314 彬强</div>
            <div class="pad-t-30" @click="toUser('1432959471625375745')">首页 1432959471625375745 tony</div>
            <div class="pad-t-30" @click="toDetail('1396751881346445314')">商品详情 1396751881346445314 彬强</div>
          </div> -->
          <div v-if="shopSelectionAuthority !== 1" :style="{marginTop : showMemberInfo ? '44px' : ''}">
            <!-- 标签导航组件 -->
            <div
              v-if="topnavObj.componentType === 41">
              <van-sticky :offset-top="headerNavH">
                <div class="topnav" :style="{backgroundColor: topnavObj.propMap.backgroundColor}">
                  <div v-for="(topnav, navIndex) in topnavObj.topNavList" :key="navIndex"
                    class="topnav--item"
                    :class="{'topnav--scroll': topnavObj.topNavList.length > 5}"
                    :style="{
                      backgroundColor: topNavActive === navIndex ? topnavObj.propMap.selectBackgroundColor : '',
                      color: topNavActive === navIndex ? topnavObj.propMap.selectFontColor : topnavObj.propMap.fontColor
                    }"
                    @click="topNavClick(topnav, navIndex)">
                    <div class="pos-rel">
                      {{topnav.navName}}
                      <div class="topnav--active" :style="{backgroundColor: topnavObj.propMap.selectFontColor}" v-if="topNavActive === navIndex"></div>
                    </div>
                  </div>
                </div>
              </van-sticky>
            </div>
            <second-page v-if="!detailsNone"  @userInfo='userInfo' :content="detailsList" :enterpriceId="memberEnterpriseId"
              @countdowmFinish="countDownFinish" urlFrom="home"></second-page>
          </div>          
        </div>
      </div>
    </template>
    <div class="nodata">
      <div style="padding-top: 120px;" v-if="detailsNone">
        <img v-if="fileSpace" :src="fileSpace + '/images/shop-nodata.png'" class="width-375 height-91" alt="">
        <div class="align-c mar-t-5 font-16 font-color-6">
          {{ checkOwner ? '您还没有设置商品哟~' : '空空如也' }}
        </div>
        <div v-if="checkOwner && getVeekrayStatus === 1" class="goSetting">
          <button v-if="shopSelectionAuthority === 1" @click="$pt.navigateTo({url:'/pages/personal/commodity-library/main'})">前往选品库</button>
        </div>
        <div v-if="checkOwner && getVeekrayStatus === 1" class="pad-t-30"></div>
      </div>
    </div>
    <div class="fix-r-btn flex-col">
      <!-- 回我店铺 -->
      <div class="align-r pad-r-13">
        <back-btn v-if="backBoolean" />
      </div>
      <!-- 悬浮按钮 -->
      <div class="align-r pad-r-7">
        <float-btn :floatList="floatList" urlFrom="home" @userInfo="userInfo"/>
      </div>
    </div>
    <!-- 优惠券弹层 -->
    <div class="coupon-swiper-box" v-if="couponSwiper">
      <div class="coupon-swiper-main">
        <swiper class="top-swiper" :autoplay="0" :current="current" interval="5000" indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#ffffff" duration="1000" indicator-dots="true">
          <block v-for="(item, index) in listCoupon" :key="index">
            <swiper-item>
              <img class="top-img" mode="aspectFill" v-if="item.imageUrl" :src="item.imageUrl + '?imageView2/2/w/700'" @click="linkCoupon(item)" />
            </swiper-item>
          </block>
        </swiper>
      </div>
      <div class="width-60 height-60 flex flex-center coupon-close" @click="closeCouponLayer">
        <img v-if="fileSpace" :src="fileSpace + '/images/icon-coupon-close.png'" class="width-30 height-30" alt="">
      </div>
      <div class="coupon-swiper-bg" @click="couponSwiper = false"></div>
    </div>    
  </div>
</template>

<script>
import GetUserInfo from '@/components/GetUserInfo'
import GetPhoneInfo from '@/components/GetPhoneInfo'
import headerNav from '@/components/headerNav'
import BackBtn from '@/components/BackBtn'
import secondPage from '@/components/CustomRichText/secondPage'
import SwiperImg from '@/components/SwiperImg/SwiperImg'
import FloatBtn from '@/components/FloatBtn'
import {
  getMemberInfo,
  getHomePage,
  listHomeCoupon,
  getCustomPage
} from '@/api/home'
import { getShopCartNum } from '@/api/shop'
import {
  setStoreCardFlag, setMemberNature, setToken, setVeekrayStatus, setEnterpriseId,
  setShowBuyCard, setMemberId,
  setCustomerCommanderStatus, setEnterprisePhone,
  setCartBadge, setPayMethod
} from '@/utils/auth'
import { shareCard } from '@/api/accessStat'
import { getAuth, checkLogin } from '@/api/login'
import { appColor } from '@/api/appColor'
import { navList } from '@/api/navList'
import { getAppInfo, getAuthority, getCustomerPhone } from '@/api/common'

export default {
  components: {
    GetUserInfo,
    GetPhoneInfo,
    headerNav,
    BackBtn,
    FloatBtn,
    secondPage,
    SwiperImg
  },
  data() {
    return {
      current: 0,
      memberInfo: {
        memberDetails: {}
      },
      customerInfo: {
        memberDetails: {}
      },
      isGetUserInfo: false,
      isGetPhoneInfo: false,
      isGetLocalInfo: false,
      isGetStoreOff: false,
      pageLoad: true,
      backBoolean: false,
      loadNum: 0,
      detailsNone: false,
      detailsList: [],
      resData: {},
      linkList: {
        1001: '/pages/personal/coupon/coupon-center/main', // 领券中心
        1002: '/pages/contact-btn/main', // 微信客服
        1004: '/pages/shop/main', // 分类链接
        1005: '/pages/home/main', // 首页
        1006: '/pages/shop/main', // 分类
        1007: '/pages/shop/cart/main', // 购物车
        1008: '/pages/personal/main', // 个人中心
        1009: '/pages/home/content-center/main', // 内容中心
        1010: '/pages/shop/searchView/main', // 搜索页面
        1011: '/pages/personal/message/detail/main', // 小B客服
        1012: '/pages/contact-btn/main', // 企业客服
        1101: '/pages/home/second-custom/main', // 自定义页面
        1401: '/pages/home/live-list/main', // 直播列表
        1501: '/pages/home/default-seckill/main', // 限时秒杀
        1502: '/pages/home/default-seckill/main', // 社区团购
        2001: '/pages/shop/detail/main', // 商品详情
        4001: '/pages/home/content-center/content-detail/main' // 内容中心详情
      },
      homeLoad: true,
      memberEnterpriseId: '',
      listQuery: {
        memberId: '',
        customerId: '',
        enterpriseId: ''
      },
      promotionList: [],
      fastGoods: [],
      listCoupon: [],
      couponSwiper: false,
      getAppInfo: {},
      showBackBtn: false,
      showPhonePage: '0',
      navList: [],
      headerNavH: 0,
      topNavActive: 0,
      topnavObj: {},
      pageBcConfig: {},
      customField: {},
      timer: null,
      shopSelectionAuthority: 0, // 小B选品增值功能
      shareMemberId: null,
      skeletonLoading: true,
      topNavType: false,
      floatList: [],
      local: {},
      currentPickup: {},
      homeType: 13, // 11社区团购 12门店到家 13社群分销(默认)
      shopCartNum: '',
      showMemberInfo: false // 是否显示店主信息栏
    }
  },
  onLoad(options) {
    if ('showPhonePage' in options) {
      this.showPhonePage = '1'
      let that = this
      setTimeout(function() {
        if (that.getCustomerId && !that.getPhone) {
          that.isGetPhoneInfo = true
          that.$pt.hideTabBar({animation: false})
          that.showBackBtn = true
        }
      }, 1500)
    }
    // 初始化data
    Object.assign(this.$data, this.$options.data())
    this.memberInfo.avatar = 'https://veekrayimg.joinsun.vip/head-portrait.png'
    this.customerInfo.avatar = 'https://veekrayimg.joinsun.vip/head-portrait.png'
    this.local = this.$pt.getStorageSync('local')
    this.getAuth()
    wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    })
    let sysInfo = ''
    sysInfo = this.$pt.getSystemInfoSync()
    if (sysInfo.system.indexOf('iOS') === -1) {
      // android类型
      this.$pt.setStorageSync('iOS', false)
    } else {
      this.$pt.setStorageSync('iOS', true)
    }
    this.$pt.setStorageSync('devW', wx.getSystemInfoSync().windowWidth)
  },
  onShow() {
    this.getAppEls()
    this.loadNum = 0
    this.shareMemberId = this.getCurrentPage().query.shareMemberId || ''
    if (!this.$store.state.shareMemberId) {
      this.$store.commit('setShareMemberId', this.shareMemberId)
    }
    if (this.$pt.getStorageSync('couponSwiper') === -1) {
      this.couponSwiper = false
    }
    if (this.getCurrentPage().query.custom_params) {
      this.custom_params = JSON.parse(decodeURIComponent(this.getCurrentPage().query.custom_params))
      if (this.custom_params.liveShareMemberId) {
        this.$utils.setMyId(this.custom_params.liveShareMemberId)
        setMemberId(this.custom_params.liveShareMemberId)
      }
    }
    if (this.$pt.getStorageSync('getCoupon')) {
      this.$pt.removeStorageSync('getCoupon')
    }
    // 清除自定义二级页缓存ID
    if (this.$pt.getStorageSync('secondPage')) {
      this.$pt.removeStorageSync('secondPage')
    }
    // 清除分类缓存分类ID
    this.$pt.removeStorageSync('categoryInfo')
    if (this.getMemberId && this.getCustomerId) {
      this.getShopCartNum()
    }
  },
  mounted() {
    this.initHomeEls()
  },
  onPullDownRefresh() {
    this.pullPageDownEls()
    setTimeout(() => {
      this.$pt.stopPullDownRefresh()
    }, 80)
  },
  onShareAppMessage() {
    // 分享名片埋点
    shareCard(this.getMemberId)
    if (this.resData) {
      return {
        title: this.resData.shareTitle,
        path: `pages/home/main?memberId=${this.getMemberId}&shareMemberId=${this.getCustomerId}`,
        imageUrl: this.resData.sharePicUrl
      }
    } else {
      return {
        title: this.memberInfo.nickname + '的店铺',
        path: `pages/home/main?memberId=${this.getMemberId}&shareMemberId=${this.getCustomerId}`,
        imageUrl: this.fileSpace + '/images/share-s-picture.png'
      }
    }
  },
  onShareTimeline() {
    if (this.resData) {
      return {
        title: this.resData.shareTitle,
        imageUrl: this.resData.sharePicUrl,
        query: 'memberId=' + this.getMemberId + '&shareMemberId=' + this.getCustomerId
      }
    } else {
      return {
        title: this.memberInfo.nickname + '的店铺',
        imageUrl: this.resData.sharePicUrl,
        query: 'memberId=' + this.getMemberId + '&shareMemberId=' + this.getCustomerId
      }
    }
  },
  methods: {
    pullPageDownEls() {
      this.$utils.showToast({
        title: '加载中',
        icon: 'loading',
        duration: 5000
      })
      this.loadNum = 0
      this.topNavType = false
      this.$pt.removeStorageSync('couponSwiper')
      this.getAppEls()
      this.initMemberInfo()
    },
    getShopCartNum() {
      getShopCartNum({
        memberId: this.getMemberId,
        customerId: this.getCustomerId
      }).then((response) => {
        if (response.isError) return
        if (response.data.goodsNum) {
          this.shopCartNum = response.data.goodsNum
        } else {
          this.shopCartNum = 0
        }
        this.totalCartBadge()
      }).catch(() => {
      })
    },
    lowVersionEls() {
      this.$pt.showTabBar({
        animation: false
      })
    },
    initHomeEls() {
      if (this.getMemberId) {
        this.getAuthority()
        this.initMemberInfo()
      } else {
        this.$pt.setStorageSync('homeNone', true)
        checkLogin(this.getMemberId)
      }
    },
    userInfo(res) {
      if (!this.getCustomerId) {
        this.isGetUserInfo = res
      } else if (!this.getPhone) {
        this.isGetPhoneInfo = true
      }
      this.showBackBtn = true
      let that = this
      setTimeout(function() {
        that.$pt.hideTabBar({
          animation: false
        })
      }, 700)
    },
    showPage() {
      this.isGetUserInfo = false
      this.isGetPhoneInfo = false
      this.$pt.showTabBar({
        animation: false
      })
    },
    getAppEls() {
      getAppInfo().then((response) => {
        if (response.isError) return
        let getAppInfo = response.data
        if (getAppInfo.enterpriseId) {
          setEnterpriseId(response.data.enterpriseId)
          this.navList = navList(getAppInfo.enterpriseId)
        }
        if (!this.getShowBuyCard && getAppInfo.enterpriseId) {
          this.memberEnterpriseId = getAppInfo.enterpriseId
        }
        this.getAppInfo = appColor(getAppInfo)
        // 小程序朋友圈分享
        if (wx.getLaunchOptionsSync().scene && wx.getLaunchOptionsSync().scene === 1154) {
          setMemberId(response.data.defaultMemberId)
          this.$pt.setStorageSync('memberId', response.data.defaultMemberId)
          this.$pt.setStorageSync('myId', response.data.defaultMemberId)
          this.$pt.setStorageSync('enterpriseId', response.data.enterpriseId)
          setEnterpriseId(response.data.enterpriseId)
          this.$pt.setStorageSync('showBuyCard', true)
          this.getHomePage()
        }
      }).catch(() => {
      })
    },
    toUser(memberId) {
      setMemberId(memberId)
      this.$utils.setMyId(memberId)
      this.$root.$mp.appOptions.query = {}
      this.$pt.reLaunch({ url: '/pages/home/main' })
    },
    toDetail(memberId) {
      this.$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=1396763292961304577&goodsType=30&memberId=' + memberId + '&customerId=' + this.getCustomerId})
    },
    countDownFinish() {
      this.getHomePage()
    },
    getHomePage() {
      if (this.shopSelectionAuthority === 1) return
      this.resData = {}
      this.detailsNone = false
      const scanIn = this.$pt.getStorageSync('scanIn')
      this.userPhoneLayer(scanIn)
      let params = {
        memberId: this.getMemberId,
        customerId: this.getCustomerId,
        homeType: 13
      }
      if (!this.getShowBuyCard) {
        params.customerId = this.getMemberId
      }
      if (!this.topNavType) {
        this.skeletonLoading = true
      } else {
        this.$utils.showToast({
          title: '加载中',
          icon: 'loading'
        })
      }
      getHomePage(params).then(response => {
        if (response.isError) return
        this.skeletonLoading = false
        this.$pt.hideToast()
        this.userPhoneLayer(scanIn)
        this.$pt.pageScrollTo({
          scrollTop: 0
        })
        if (Object.keys(response.data).length) {
          this.resData = response.data
          if (this.resData.titleType === 11) {
            this.$pt.setNavigationBarColor({
              frontColor: '#ffffff',
              backgroundColor: this.resData.titleBackgroundColor
            })
          } else {
            this.$pt.setNavigationBarColor({
              frontColor: '#000000',
              backgroundColor: this.resData.titleBackgroundColor
            })
          }
          this.$set(this.memberInfo, 'shopName', response.data.shopName)
          let dataList = response.data.detailsList ? response.data.detailsList : []
          let temp = dataList.filter(item => item.componentType === 42)
          this.showMemberInfo = temp.length
          if (!dataList.length) {
            this.detailsNone = true
          } else {
            this.detailsNone = false
            let topnavList = dataList.filter(item => item.componentType === 41)
            this.topnavObj = {}
            if (topnavList.length > 0) {
              let list = this.topnavObj = topnavList[0]
              if (list.topNavList[this.topNavActive].linkType === 1101) {
                const linkParams = list.topNavList[this.topNavActive].linkParams.split('=')[1]
                // 调取自定义组件数据请求方法
                // dataList[0]为自定义页店主栏数据
                return this.getCustomPage(dataList[0], linkParams)
              }
              // 首页数据的封装
              this.detailsList = dataList.filter(item => item.componentType !== 41)
            } else {
              this.detailsList = dataList
            }
            this.pageBcConfig = response.data
            this.detailsList.forEach(item => {
              if (item.componentType === 30 && item.propMap.roomId) {
                if (item.propMap.startTime) {
                  item.propMap.startTime = this.$utils.formatTimeToMD(new Date(item.propMap.startTime * 1000))
                }
                // 直播状态
                // 101: 直播中, 102: 未开始, 103: 已结束
                // 104: 禁播, 105: 暂停中, 106: 异常, 107: 已过期
                switch (Number(item.propMap.liveStatus)) {
                  default:
                  case 101:
                    item.propMap.live_status_txt = '直播中'
                    break
                  case 102:
                    item.propMap.live_status_txt = '未开始'
                    break
                  case 103:
                    item.propMap.live_status_txt = '已结束'
                    break
                  case 104:
                    item.propMap.live_status_txt = '禁播'
                    break
                  case 105:
                    item.propMap.live_status_txt = '暂停中'
                    break
                  case 106:
                    item.propMap.live_status_txt = '异常'
                    break
                  case 107:
                    item.propMap.live_status_txt = '已过期'
                    break
                }
              }
              if (item.componentType === 21) {
                this.floatList = item.floatButtonList
              }
              if (item.componentType === 12 && item.pictureList && item.pictureList.length && !this.$pt.getStorageSync('iOS')) {
                let that = this
                wx.getImageInfo({
                  src: item.pictureList[0].imgUrl,
                  success(e) {
                    if (item.propMap.picStyle === '10' && !that.$pt.getStorageSync('iOS')) {
                      item.pictureList[0].height = parseInt(((that.$pt.getStorageSync('devW') * e.height) / e.width) - item.propMap.verticalMargin * 1)
                      item.propMap.pictureHeight = parseInt(item.pictureList[0].height)
                    }
                    if (item.propMap.picStyle !== '10' && !that.$pt.getStorageSync('iOS')) {
                      item.pictureList[0].height = parseInt(((that.$pt.getStorageSync('devW') / 2 * e.height) / e.width) - item.propMap.verticalMargin * 1)
                      item.propMap.pictureHeight = parseInt(item.pictureList[0].height)
                    }
                  }
                })
              }
              if (item.componentType === 19 && item.swiperList && item.swiperList.length) {
                let that = this
                wx.getImageInfo({
                  src: item.swiperList[0].imgUrl,
                  success(e) {
                    if (item.propMap.swiperStyle === '10') {
                      item.swiperList[0].height = parseInt(((that.$pt.getStorageSync('devW') * e.height) / e.width) - item.propMap.verticalMargin * 1)
                      item.propMap.swiperHeight = parseInt(item.swiperList[0].height)
                    }
                    if (item.propMap.swiperStyle !== '10') {
                      item.swiperList[0].height = parseInt(((that.$pt.getStorageSync('devW') / 2 * e.height) / e.width) - item.propMap.verticalMargin * 1)
                      item.propMap.swiperHeight = parseInt(item.swiperList[0].height)
                    }
                  }
                })
              }
            })
          }
        } else {
          this.resData = {}
          this.detailsList = []
          this.detailsNone = true
          this.$pt.setNavigationBarColor({
            frontColor: '#000000',
            backgroundColor: '#ffffff'
          })
        }
      })
    },
    layerMyShop() {
      if (this.loadNum > 1) return
      this.$pt.removeStorageSync('getUserFinished')
      const that = this
      if (that.$pt.getStorageSync('otherShop')) {
        that.showCouponLayer()
        that.backBoolean = true
        return
      }
      this.$pt.showModal({
        title: '温馨提示',
        content: '您正在访问其他卖家的店铺，确定继续访问吗？',
        cancelText: '继续访问',
        cancelColor: '#000000',
        confirmText: '回我的店',
        confirmColor: '#ffb003',
        success(res) {
          if (res.confirm) {
            // 回我的店
            that.$pt.removeStorageSync('otherShop')
            that.$pt.setStorageSync('personalType', 1)
            that.backBoolean = false
            that.$utils.setMyId(that.getCustomerId)
            that.$root.$mp.appOptions.query = {}
            that.$pt.reLaunch({ url: '/pages/home/main' })
          } else if (res.cancel) {
            // 继续访问
            that.$pt.setStorageSync('otherShop', true)
            that.backBoolean = true
            that.showCouponLayer()
          }
        }
      })
    },
    pageTo(item) {
      this.pageLoad = false
      this.$pt.navigateTo({ url: '/pages/shop/detail/main?goodsId=' + item.goodsId + '&goodsType=30' })
    },
    getAuth() {
      let that = this
      this.$pt.login({
        success(res) {
          if (res.code) {
            getAuth(res.code).then((response) => {
              setShowBuyCard(response.data.showBuyCard)
              setToken(response.data.token)
              if (response.data.veekrayStatus) {
                setVeekrayStatus(response.data.veekrayStatus)
              }
              if (response.data.enterpriseId) {
                setEnterpriseId(response.data.enterpriseId)
              }
              // 设置团长身份状态
              if (response.data.commanderStatus === 1) {
                setCustomerCommanderStatus(response.data.commanderStatus)
              }
              const scanIn = that.$pt.getStorageSync('scanIn')
              if (!response.data.phone && scanIn) {
                that.isGetPhoneInfo = false
                setTimeout(() => {
                  that.isGetPhoneInfo = true
                }, 100)
                that.$pt.hideTabBar({
                  animation: false
                })
              }
              if (response.data.phone && scanIn) {
                that.$pt.showTabBar({
                  animation: false
                })
                that.isGetPhoneInfo = false
              }
            }).catch(() => {
            })
          }
        }
      })
    },
    // 会员基本信息
    initCustomerInfo() {
      if (!this.getCustomerId) return
      getMemberInfo(this.getCustomerId).then((response) => {
        if (response.isError) return
        this.customerInfo = response.data
        if (this.customerInfo.payMethod) {
          setPayMethod(this.customerInfo.payMethod)
        } else {
          setPayMethod(1)
        }
        if (this.getCustomerId) {
          // unionId不存在，弹出微信重新授权，打通多个小程序之间的数据
          if (!this.customerInfo.unionId && this.getShowBuyCard) {
            this.$pt.hideTabBar({
              animation: false
            })
            this.isGetUserInfo = false
            setTimeout(() => {
              this.isGetUserInfo = true
            }, 100)
          } else {
            this.$pt.showTabBar({
              animation: false
            })
          }
        }
        setTimeout(() => {
          if (this.customerInfo.nickname) {
            this.customerInfo.nickname = this.$utils.getStrByLens(this.customerInfo.nickname, 16)
          }
          if (this.customerInfo.memberDetails.personalityName) {
            this.customerInfo.memberDetails.personalityName = this.$utils.getStrByLens(this.customerInfo.memberDetails.personalityName, 30)
          }
          if (!this.getCustomerId) {
            this.customerInfo.avatar = 'https://veekrayimg.joinsun.vip/head-portrait.png'
          }
        }, 500)
      }).catch(() => {
      })
    },
    linkCoupon(item) {
      if (this.getShowBuyCard === false) return
      this.$pt.navigateTo({ url: '/pages/personal/coupon/suit-goods/main?couponId=' + item.couponId + '&actionId=' + item.actionId })
    },
    showCouponLayer() {
      if (this.getShowBuyCard === false) return
      if (!this.getCustomerId || this.isGetPhoneInfo) return
      if (this.$pt.getStorageSync('couponSwiper') === -1) {
        this.couponSwiper = false
        return
      }
      listHomeCoupon({
        customerMemberId: this.getCustomerId
      }).then((response) => {
        if (response.isError) return
        this.listCoupon = response.data
        if (this.listCoupon.length) {
          this.$pt.setStorageSync('couponSwiper', 1)
          setTimeout(() => {
            this.couponSwiper = true
          }, 3500)
        } else {
          this.couponSwiper = false
        }
      }).catch(() => {
      })
    },
    closeCouponLayer() {
      this.$pt.setStorageSync('couponSwiper', -1)
      this.couponSwiper = false
    },
    cartIndexEls() {
      let cartIndex = null
      this.navList = this.$pt.getStorageSync('navList')
      if (this.navList.length) {
        this.navList.forEach((item, index) => {
          if (item.linkType === 1007) {
            cartIndex = index
          }
        })
      } else {
        cartIndex = 2
      }
      return cartIndex
    },
    totalCartBadge() {
      // console.log('totalCartBadge 111aa', this.shopCartNum)
      let cartBadge = 0
      if (!this.shopCartNum) {
        // console.log('totalCartBadge 111bb', this.shopCartNum)
        this.$pt.removeStorageSync('cartBadge')
        if (this.cartIndexEls()) {
          this.$pt.removeTabBarBadge({
            index: this.cartIndexEls()
          })
        }
        return
      }
      cartBadge = this.shopCartNum
      // console.log('11cc cartBadge', cartBadge)
      if (this.cartIndexEls()) {
        this.$pt.setTabBarBadge({
          index: this.cartIndexEls(),
          text: String(cartBadge)
        })
        setCartBadge(cartBadge)
      }
    },
    userPhoneLayer(scanIn) {
      if (!this.getCustomerId && scanIn) {
        this.$pt.hideTabBar({
          animation: false
        })
        this.isGetUserInfo = false
        setTimeout(() => {
          this.isGetUserInfo = true
        }, 100)
      }
      if (!this.$pt.getStorageSync('phone') && (scanIn || this.showPhonePage === '1')) {
        this.$pt.hideTabBar({
          animation: false
        })
        if (this.getCustomerId) {
          this.isGetUserInfo = false
        }
        this.isGetPhoneInfo = false
        setTimeout(() => {
          this.isGetPhoneInfo = true
        }, 100)
      }
      if (this.$pt.getStorageSync('phone') && scanIn) {
        this.$pt.showTabBar({
          animation: false
        })
        this.isGetPhoneInfo = false
      }
      if (!this.getCustomerId && scanIn) {
        this.$pt.hideTabBar({
          animation: false
        })
        this.isGetUserInfo = false
        setTimeout(() => {
          this.isGetUserInfo = true
        }, 100)
      }
    },
    initMemberInfo() {
      this.loadNum++
      const scanIn = this.$pt.getStorageSync('scanIn')
      const scanCode = this.$pt.getStorageSync('scanCode')
      if (this.getCustomerId && this.getPhone && scanIn && scanCode) {
        this.$pt.showTabBar({
          animation: false
        })
        setTimeout(() => {
          this.$pt.reLaunch({
            url: '/pages/home/get-card/main?salesData=' + scanCode
          })
        }, 300)
        return
      }
      if (this.getMemberId && this.getCustomerId && this.loadNum > 1) {
        this.getShopCartNum()
      }
      if (this.topNavActive === 0) {
        this.getHomePage()
      }
      // 如果缓存没有手机号码，则弹出微信授权手机号码
      this.userPhoneLayer(scanIn)
      this.current = 0
      if (this.getCustomerId) {
        this.initCustomerInfo()
        // 访问名片埋点
        if (!this.getMemberId) return
      }
      // 弹出提示，是否回我店铺提示
      this.backBoolean = false
      if (this.getCustomerId) {
        if (this.getShowBuyCard !== false && this.getVeekrayStatus === 1 && !this.checkOwner && this.getCustomerId) {
          this.layerMyShop()
        } else {
          this.showCouponLayer()
          this.$pt.removeStorageSync('getUserFinished')
        }
      } else {
        setTimeout(() => {
          if (this.getShowBuyCard !== false && this.getVeekrayStatus === 1 && !this.checkOwner && this.getCustomerId) {
            this.layerMyShop()
          } else {
            this.showCouponLayer()
            this.$pt.removeStorageSync('getUserFinished')
          }
        }, 1200)
      }
      if (!this.getMemberId) return
      getMemberInfo(this.getMemberId).then((response) => {
        if (response.isError) return
        this.skeletonLoading = false
        // 如果缓存没有手机号码，则弹出微信授权手机号码
        this.userPhoneLayer(scanIn)
        this.memberInfo = response.data
        if (response.data.enterpriseId) {
          this.memberEnterpriseId = response.data.enterpriseId || ''
          this.getCustomerPhone(response.data.enterpriseId)
        } else {
          this.detailsNone = true
        }
        // 微信审核可运行首页自定义
        if (!this.getShowBuyCard) {
          setTimeout(() => {
            this.$pt.hideToast()
            this.getHomePage()
          }, 1000)
        }
        if (response.data.storeCardFlag) {
          setStoreCardFlag(response.data.storeCardFlag)
        }
        if (response.data.nature) {
          setMemberNature(response.data.nature)
        }
        setTimeout(() => {
          if (this.memberInfo.nickname) {
            this.memberInfo.nickname = this.$utils.getStrByLens(this.memberInfo.nickname, 16)
          }
          if (this.memberInfo.memberDetails.personalityName) {
            this.memberInfo.memberDetails.personalityName = this.$utils.getStrByLens(this.memberInfo.memberDetails.personalityName, 30)
          }
        }, 500)
      }).catch(() => {
      })
    },
    getCustomerPhone(enterpriseId) {
      if (!enterpriseId) return
      getCustomerPhone({
        enterpriseId: enterpriseId
      }).then((response) => {
        if (response.isError) return
        setEnterprisePhone(response.data)
        // this.customerPhone = response.data
      }).catch(() => {
      })
    },
    headerNavHeight(height) {
      // 获取头部状态栏与店主栏的总高度
      this.headerNavH = height
    },
    topNavClick(item, index) {
      clearTimeout(this.timer)
      this.detailsNone = false
      this.timer = null
      this.timer = setTimeout(() => {
        if (this.topNavActive === index) return
        this.topNavActive = index
        this.topNavType = true
        this.getHomePage()
      }, 500)
    },
    getCustomPage(arrData, linkParams) {
      // 获取自定义组件页面的数据
      this.floatList = []
      const params = {
        pageId: linkParams,
        memberId: this.getMemberId,
        customerId: this.getCustomerId,
        enterpriseId: this.getEnterpriseId ? this.getEnterpriseId : ''
      }
      getCustomPage(params).then(response => {
        if (response.isError) return
        this.$pt.hideToast()
        this.pageBcConfig = response.data
        this.detailsList = response.data.detailsList
        if (arrData.componentType) {
          this.detailsList.unshift(arrData)
        }
        this.detailsList.forEach(item => {
          if (item.componentType === 30 && item.propMap.roomId) {
            if (item.propMap.startTime) {
              item.propMap.startTime = this.$utils.formatTimeToMD(new Date(item.propMap.startTime * 1000))
            }
            // 直播状态
            // 101: 直播中, 102: 未开始, 103: 已结束
            // 104: 禁播, 105: 暂停中, 106: 异常, 107: 已过期
            switch (Number(item.propMap.liveStatus)) {
              default:
              case 101:
                item.propMap.live_status_txt = '直播中'
                break
              case 102:
                item.propMap.live_status_txt = '未开始'
                break
              case 103:
                item.propMap.live_status_txt = '已结束'
                break
              case 104:
                item.propMap.live_status_txt = '禁播'
                break
              case 105:
                item.propMap.live_status_txt = '暂停中'
                break
              case 106:
                item.propMap.live_status_txt = '异常'
                break
              case 107:
                item.propMap.live_status_txt = '已过期'
                break
            }
          }
        })
        this.$pt.pageScrollTo({
          scrollTop: 0
        })
      }).catch(() => {
      })
    },
    // 运营总后台 增值功能权限获取
    getAuthority() {
      getAuthority({enterpriseId: this.getEnterpriseId}).then(res => {
        this.shopSelectionAuthority = res.data.shopSelectionAuthority
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped lang="less">
.container {
  background-color: #fff;
  min-height: 100vh;
  background-size: 100%;
  background-repeat: no-repeat;
  .skeleton-box{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
    background-color: #fff;
    overflow: hidden;
    .skeleton-layer{
      margin: 15px;
      &.bg-box{
        border-radius: 10px;
        background-color: #f5f5f5;
      }
      .bg-box{
        border-radius: 10px;
        background-color: #f5f5f5;
      }
      &.layer-1{
        margin-top: 80px;
        height: 110px;
      }
      &.layer-2{        
        span{
          display: block;
          height: 60px;
          &:last-child{
            margin-right: 0!important;
          }
        }
      }
      &.layer-4{
        .flex-item{
          span{
            display: block;
            border-radius: 5px;
          }
        }
      }
    }
  }
  .skeleton-layer-bg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 99;
  }
  .site-address{
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    .border{
      border: #f1f1f1 1px solid;
      border-radius: 5px;
    }
    .share-txt{
      color: #FF243D;
    }
    .tag-delivery{
      background: #f1f3fc;
      border: #0351FF 1px solid;
      color: #2577FF;
      border-radius: 3px;
      padding: 0px 2px;
      height: 16px;      
      font-size: 9px;
      div{
        line-height: unset!important;
      }
      b{        
        font-weight: bold;
        display: inline-block;
        vertical-align: middle;
      }
      i{
        font-weight: bold;
        font-style: normal;
        display: inline-block;
        vertical-align: middle;
      }
    }
    .distance{
      color: #FF243D;
      font-size: 12px;
    }
    .site-s-line{
      width: 178px;
      height: 19px;
      line-height: 19px;
    }
    .site-line{
      width: 1px;
      height: 15px;    
      &.site-white{
        background: rgba(255, 255, 255, 0.5);
      }
      &.site-black{
        background: rgba(0, 0, 0, 0.5);
      }
    }
    .share-btn {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: none;
    }
    .share-btn:after {
      border: none;
    }
  }
  .fix-r-btn{
    position: fixed;
    right: 0;
    bottom: 9px;
    z-index: 20;
  }
  .share-btn-fixed{
    > div{
      background: linear-gradient(to right, #3b3b3a, #616161);
      color: #fff;
      border-top-left-radius: 50px;
      border-bottom-left-radius: 50px;  
      padding: 0 9px 0 10px;
    }
    span{
      padding-left: 6px;
      display: inline-block;
    }
  }
  .contactBtn {
    background-color: transparent !important;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999;
    border-color: transparent !important;
    border: none !important;
  }
  .coupon-swiper-main {
    position: fixed;
    width: 100%;
    left: 0;
    top: 50%;
    margin: -178px 0 0 0;
    z-index: 1001;
    .top-swiper {
      width: 375px;
      height: 355px;
    }
    .top-img {
      width: 375px;
      height: 355px;
    }
  }
  .coupon-close {
    position: fixed;
    left: 50%;
    top: 50%;
    margin: 190px 0 0 -30px;
    z-index: 1002;
  }
  .coupon-swiper-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
    z-index: 1000;
  }
  .home-load {
    text-align: center;
    img {
      display: inline-block;
    }
  }
  .nodata {
    .goSetting {
      margin-top: 60px;
      button {
        width: 133px;
        height: 33px;
        background: #333333;
        line-height: 33px;
        padding: 0;
        color: white;
        font-size: 15px;
      }
    }
  }
}
.module-box {
  .title-bar {
    h2 {
      margin: 0;
      padding: 0;
    }
  }
  .timer {
    .timer-t {
      color: #818181;
    }
  }
  ul {
    padding: 0;
    margin: 0;
    &:after {
      content: '';
      display: block;
      clear: both;
      font-size: 0;
    }
    li {
      list-style-type: none;
      border-radius: 4px;
      box-shadow: 0 4px 9px rgba(133, 133, 133, 0.2);
      margin-bottom: 13px;
      background-color: #fff;
      .detail-box {
        padding: 12px;
      }
      .buy-now-type {
        background: #fed806 !important;
        border: #fed806 1px solid !important;
        padding: 4px 9px;
        line-height: normal;
        color: #333 !important;
        &:after {
          display: none;
        }
      }
      .remove-type {
        background: #292929 !important;
        border: #292929 1px solid !important;
        padding: 4px 9px;
        line-height: normal;
        color: #fff !important;
        &:after {
          display: none;
        }
      }
      .pic-box {
        &.odd {
          display: none;
        }
      }
      .gooods-pic {
        &.pos-rel {
          &.del-show {
            .del-layer-bg {
              display: block;
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.7);
              z-index: 10;
            }
            .del-layer {
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              z-index: 11;
              text-align: center;
              color: #fff;
              display: block;
              &.stock-none {
                label {
                  margin-top: 18%;
                }
              }
              label {
                width: 50px;
                height: 50px;
                line-height: 50px;
                margin-top: 15%;
                font-size: 13px;
                background: rgba(0, 0, 0, 0.7);
                border: rgba(255, 255, 255, 0.7) 1px solid;
                border-radius: 100px;
                display: inline-block;
              }
              p {
                display: block;
                font-size: 10px;
                margin-top: 5%;
              }
            }
          }
        }
        img {
          display: block;
        }
      }
      .desc {
        height: 37px;
        line-height: 1.3;
        overflow: hidden;
        color: #595959;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-word;
      }
      .line-item {
        display: none;
      }
      .last-item {
        display: none;
      }
      .info-bar {
        > button {
          margin-bottom: 3px;
        }
        .tag {
          line-height: 1.3;
          .label-f {
            background: #fed807;
            color: #333;
            padding: 2px 5px;
          }
          .label-s {
            background: #272727;
            color: #fff;
            padding: 2px 5px;
            // min-width: 60px;
            box-sizing: border-box;
            span {
              color: #ffc81b;
              font-style: normal;
              &.income-label {
                padding: 0 !important;
              }
            }
          }
        }
        .price {
          .tag-xs-t {
            display: none;
          }
          .label-f {
            color: #ff0000;
          }
          .label-s {
            color: #292929;
            text-decoration: line-through;
          }
        }
        .stock {
          color: #818181;
        }
        label {
          font-weight: normal;
        }
      }
    }
  }
}
.top-swiper {
  width: 375px;
  height: 158px;
}
.top-img {
  width: 375px;
  height: 158px;
}
.type-10 {
  color: #ffb025;
  background: #fefae6;
  display: inline-block;
  padding: 0 2px;
  border-radius: 5px;
  overflow: hidden;
}
.type-30 {
  color: #ff5900;
}
.none-t-1 {
  font-size: 15px;
  color: #666;
  margin-top: 10px;
}
.none-t-2 {
  font-size: 10px;
  color: #999;
  margin-top: 2px;
}
.goods-price {
  color: #f94035;
}
.border-b {
  border-bottom: #f2f2f2 1px solid;
}
.border-pre {
  border-bottom: #f5f5f5 10px solid;
}
.panel {
  border-radius: 6px;
}
.img-item {
  width: 120px;
  height: 120px;
}
.goods-title {
  height: 46px;
  line-height: 1.8;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
// 编辑按钮
.preview-btn {
  width: 54px;
  height: 54px;
  position: fixed;
  bottom: 95px;
  z-index: 100;
  color: #ffb801;
  border-radius: 100px;
  font-size: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  &.box-shadow {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2) !important;
  }
  &.fixed-btn {
    transition: 0.3s;
    right: 5px;
    opacity: 1;
    background: linear-gradient(45deg, #3f3f3f, #606060);
    image {
      display: inline-block;
      margin-top: 9px;
      margin-bottom: -6px;
    }
  }
}
</style>
